/**
 * Created by Android on 2017/12/13.
 */
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import PopularPage from "./PopularPage"
import MyPage from "./my/MyPage"
//导入stack导航组件
import { StackNavigator } from 'react-navigation';
export  default  class HomePage extends Component{
    constructor(props){
        super(props)
        this.state={
           selectedTab:'popular'
        }
    }
   render() {
       return (
           <View style={styles.container}>
            <TabNavigator
             >
                <TabNavigator.Item
                    selected={this.state.selectedTab=='popular'}
                    title="最热"
                    badgeText="1"
                    renderBadge={()=><View style={styles.badgeView}><Text style={styles.badgeText}>10</Text></View>}
                    selectedTitleStyle={{color :'#63B8FF'}}
                    renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_popular.png')}/>}
                    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_popular.png')}/>}
                    onPress={() => this.setState({selectedTab: 'popular'})}

                >
                    {/*选项卡对应的页面*/}
                  <PopularPage/>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab=='trending'}
                    title="趋势"
                    selectedTitleStyle={{color :'#63B8FF'}}
                    renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_trending.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_trending.png')}/>}
                    onPress={() => this.setState({selectedTab: 'trending'})}
                >
                    <View style={{backgroundColor:'#0F0',flex:1}}></View>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'favorite'}
                    title="收藏"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_favorite.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_favorite.png')}/>}
                    onPress={() => this.setState({selectedTab: 'favorite'})}
                >
                    <View style={{backgroundColor:'#0F0',flex:1}}></View>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'my'}
                    title="我的"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_my.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_my.png')}/>}
                    onPress={() => this.setState({selectedTab: 'my'})}
                >
                    <MyPage   {...this.props}/>
                </TabNavigator.Item>

            </TabNavigator>
           </View>
       );
   }
}
const SimpleApp = StackNavigator({
    Home: { screen: HomePage },
    Chat: { screen: MyPage },
});
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    icon:{
        width:24,
        height:24
    },
    badgeView:{
        width:22,
        height:14 ,
        backgroundColor:'#f85959',
        borderWidth:1,
        marginLeft:10,
        marginTop:3,
        borderColor:'#FFF',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:8,
    },
    badgeText:{
        color:'#fff',
        fontSize:8,
    }
});
